JSDC 2020 回顧 - Typescript - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

JSDC 2020 回顧 - Typescript

typescript jsdc

Yuri Tsai 2020-11-20 12:00:25 ‧ 1360 瀏覽

分享至

jpg

用不用 TypeScript 隨便你，反正我是用了

講者保哥是 TypeScript 的支持者。議程目的是對還沒使用 TypeScript 的開發者進行 promotion。所以對已經在使用 TypeScript 的開發者來說內容比較入門，也比較多是在宣傳 TypeScript 的好處。

使用 TypeScript 的理由

強型別
更著重設計
適合多人開發的專案
與現有專案無縫整合
非常完整的開發工具支援
持續發展的社群

Key Remapping in Mapped Types - QueryResult

soure code

議程中保哥有介紹到一個在 v4.1 中推出，算是進階的使用特性。只要為 querySelector 的 function 宣告為型別 - QueryResult，並將 querySelector 的執行結果指派到變數，就能只透過參數傳入的 selector，就能推敲出變數的型別。

sample.ts

type QueryResult<T extends string> = MatchEachElement<GetElementNames<T>>;

/**
 * Example
 */
declare function querySelector<T extends string>(query: T): QueryResult<T>;

const a = querySelector('div.banner > a.call-to-action')
const b = querySelector('input, div')
const c = querySelector('circle[cx="150"]')
const d = querySelector('button#buy-now')
const e = querySelector('section p:first-of-type');

sample.d.ts

declare const a: HTMLAnchorElement | null;
declare const b: HTMLDivElement | HTMLInputElement | null;
declare const c: SVGCircleElement | null;
declare const d: HTMLButtonElement | null;
declare const e: HTMLParagraphElement | null;

不過透過這個例子，保哥也強調，學習 TypeScript 並不是要成為語言學家。有實務需求再去學就好，掌握基本特性就夠日常開發。

採用 TypeScript 前你該考慮的十件事

講者簡報

講者 Jeremy 跟保哥的立場相反，反對在專案中導入 TypeScript。他先列出 TypeScript 看似不錯的優點 -

為程式碼文件化
作為開發工具可便利撰寫過程
避免大部分明顯或低級的錯誤
已成為流行，社群也很發達

不使用 TypeScript 的理由

開發跟維護都會花更多的時間
解讀程式會更慢，可讀性變差(可以參考 slides 裡的對比圖)
不安全與安全感假象

這裡提到一個名詞 Soundness(健全性)。在符合 Soundness 的型別系統中，不會在編譯或執行時出現表達式與預期型別不匹配的情況。

而 Soundness 是有分級別的。以 TypeScript 來說，他算是具有一定程度的健全性。例如以下程式是可以捕捉到的錯誤

const increment = (i: number): number => {
    returni + '1';
};
const countdown: number = increment('98765432');

不過 TypeScript 也很明確提出 100% Soundness 不是他的目標，也就是他不能保證變數在執行時具有定義的型別。例如

interface A {
    x: number;
}

let a: A = { x: 3 };
let b: { x: number | string } = a;
b.x = 'unsound';
let x: number = a.x; // unsoundness

a.x.toFixed(0); // what?

上面的程式碼是不正確的，因為從 A 介面中可知 a.x 應該是一個數字。不幸的是，經過一些重新賦值後，它最終以一個字串的形式出現，並且後面的程式碼能通過編譯，但會在執行時出錯。

尤其如果使用 TypeScript 的 any，更容易出現這種錯誤。

講者提出的解法

改用 Facebook 開發的 Flow
Flow 是 Facebook 開發的型別檢查工具。

更多與 TypeScript 的比較可以在 Github 的這篇文章查看。

建置步驟 :
1. npm i -g flow-bin
2. npm i -d @babel/core @babel/cli @babel/preset-flow
3. 新增 babel.config.js，在 presets 欄位加入 @babel/preset-flow
4. npm run flow init 產生 .flowconfig
5. VSCode 的設定，把 JavaScript › Validate: Enable 關掉
6. 安裝 VSCode plugin Flow Language Support。在撰寫程式碼時直接告知錯誤
在使用上，只要在想進行型別加註和檢查的 js 檔的開頭加 // @flow 即可。
以 xstate 做資料的狀態管理

XState 是一個狀態管理(State Management)的 Library，負責儲存及描述各種狀態與各種狀態間的轉換，有點類似於 Redux、Flux，不同的地方在於 XState 整個核心都源自於 Statecharts，也就是我們需要定義好整個應用程式會有哪些狀態，和每個狀態下能轉換到哪些狀態(順序性)以及他們之間如何轉換。XState 簡介
以 FP(Functional Programming)轉換開發思維
使用其他語言(e.g. Dart / Clojure / Elm ...)